<template>
  <div class="outer">
    <div class="box">
    <el-card style="padding: 0; background: linear-gradient(45deg, #d1a6e0, #a5b1ff, #e2c6ff);color: #ffffff;height: 120px">
      <el-row :gutter="20">
        <el-col :span="4">
          <div style="display: flex; align-items: center;font-size: 17px;margin-top: -5px">
            <icon
              icon="unjs:destr"
              font-size="60"
              style="margin-right:10px">
            </icon>
            <el-button
              class="task-button"
              size="large"
              type="text"
              @click="startEditing"
              @click.stop
              style="font-size: 16px;color:#ffffff"
            >
            {{ taskName }} <i style="color:#ffffff;" class="el-icon-edit"></i>
          </el-button>
            <el-tag v-if="taskType=== '已完成'" color="#4CCB7E" style="margin-left: 10px">{{taskType}}</el-tag>
            <el-tag v-if="taskType=== '运行中'" color="#409eff" style="margin-left: 10px">{{taskType}}</el-tag>
            <el-tag v-if="taskType=== '运行失败'" color="#f56c6c" style="margin-left: 10px">{{taskType}}</el-tag>
          </div>
          <div style="margin-top: 10px">
            <el-button
                max-width="100px"
                class="task-button"
                size="large"
                type="text"
                style="font-size: 13px;color:#ffffff;margin-left: 69px;margin-top: -10px"
                @click.stop
              >
              {{ desc }}
            </el-button>
          </div>
        </el-col>
        <el-divider direction="vertical" style="height: 65px;margin-right: 20px"/>
        <el-col :span="4">
          <div style="display: flex; align-items: center;font-size: 17px;margin-top: -5px">
            <div class="icon-info">
              <icon
                icon="grommet-icons:cpu"
                font-size="35"
                style="color: #ffffff;">
              </icon>
            </div>
            <span style="margin-left: 15px;font-size: 13px">
              <div class="parameter">avgTps：100</div>
              <div class="parameter">avgCpu：75%</div>
              <div class="parameter">avgMemory：98%</div>
              <div>avgResponseTime：0.9991s</div>
            </span>
          </div>

        </el-col>
        <el-col :span="4">
          <div style="display: flex; align-items: center;font-size: 17px;margin-top: 5px">
            <div class="icon-info">
              <icon
                icon="el:adult"
                font-size="35"
                style="color: #ffffff;">
              </icon>
            </div>
            <span style="margin-left: 15px">
              <div style="margin-bottom: 8px">创建人</div>
              <div style="font-size: 13px">泊寓</div>
            </span>
          </div>

        </el-col>
        <el-col :span="4">
          <div style="display: flex; align-items: center;font-size: 17px;margin-top: 5px">
            <div class="icon-info">
              <icon
                icon="el:time"
                font-size="35"
                style="color: #ffffff;">
              </icon>
            </div>
            <span style="margin-left: 15px">
              <div style="margin-bottom: 8px">运行时长</div>
              <div style="font-size: 13px">0h 0m 23s</div>
            </span>
          </div>

        </el-col>
        <el-col :span="4">
          <div style="display: flex; align-items: center;font-size: 17px;margin-top: 5px">
            <div class="icon-info">
              <icon
                icon="grommet-icons:document-time"
                font-size="35"
                style="color: #ffffff;">
              </icon>
            </div>
            <span style="margin-left: 15px">
              <div style="margin-bottom: 8px">上传时间</div>
              <div style="font-size: 13px">2024-09-17 03:31:30</div>
            </span>
          </div>

        </el-col>
        <el-col :span="4">
          <div class="projectInfo">
            <el-button type="info" @click="back">返回</el-button>
            <el-button type="primary">保存</el-button>
            <el-button :disabled="!isTaskType" type="primary">导出</el-button>
            <el-button type="success">报告通知</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">指标详情</el-menu-item>
      <el-menu-item index="2">压力机监控</el-menu-item>
      <el-menu-item index="3">被测服务监控</el-menu-item>
      <el-menu-item index="4">日志</el-menu-item>
    </el-menu>
    <el-scrollbar height="calc(100vh - 240px)">
      <div v-if="activeIndex === '1'" class="munu">
        <div style="display: flex; align-items: center; justify-content: space-between;">
          <div class="title-info">
              <el-divider direction="vertical" class="divider" />
              压测信息
          </div>
          <div style="display: flex; align-items: center;">
              <el-button class="runStop" type="primary">查看压测配置</el-button>
              <el-button v-if="taskType === '运行中'" class="runStop" type="warning">
                  <i class="el-icon-switch-button" style="margin-right: 5px"></i>暂停运行
              </el-button>
              <el-button v-else class="runStop" type="success">
                  <i class="el-icon-switch-button" style="margin-right: 5px"></i>重新运行
              </el-button>
          </div>
        </div>
        <div class="spacing">
          <span>任务类型：普通任务</span>
          <span>压测模式：并发模式</span>
          <span>控制模式：集中模式</span>
          <span>日志模式：开启-仅失败日志</span>
          <span>压测并发数：188</span>
        </div>
        <div class="table-desc" >
          <el-button
              :disabled="isButtonDisabled"
              style="margin-right: 25px;position: relative;"
              type="success">
              <i class="el-icon-view" style="margin-right: 5px"></i>
              仅查看
          </el-button>
          <span>Max(ms)：最大响应时间</span>
          <span>Min(ms)：最小响应时间</span>
          <span>Avg(ms)：平均响应时间</span>
          <span>90%ile(ms)：90%响应时间线</span>
          <span>99%ile(ms)：99%响应时间线</span>
          <span>RPS：每秒请求数</span>
          <span>TPS(吞吐量)：每秒处理事务数</span>
        </div>
        <div style="margin-bottom: 30px">
          <el-table ref="table"  :data="reportList" style="width: 100%"  border  empty-text="暂无数据" >
            <el-table-column prop="reportName" label="接口名称"  align="center"></el-table-column>
            <el-table-column prop="status" label="总请求数"  width="120" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.status === '报告-已完成'" type="success">{{ scope.row.status }}</el-tag>
                <el-tag v-else-if="scope.row.status === '报告-执行失败'" type="danger">{{ scope.row.status }}</el-tag>
                <el-tag v-else-if="scope.row.status === '报告-执行中'" type="primary">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="taskName" label="请求成功数"  align="center" width="110"></el-table-column>
            <el-table-column prop="taskName" label="请求失败数"  align="center" width="110"></el-table-column>
            <el-table-column prop="taskName" label="Max(ms)"  align="center" width="100"></el-table-column>
            <el-table-column prop="taskName" label="Min(ms)"  align="center" width="100"></el-table-column>
            <el-table-column prop="taskName" label="Avg(ms)"  align="center" ></el-table-column>
            <el-table-column prop="taskName" label="90%ile(ms)"  align="center" width="110"></el-table-column>
            <el-table-column prop="taskName" label="99%ile(ms)"  align="center" width="110"></el-table-column>
            <el-table-column prop="taskType" label="RPS"   align="center"></el-table-column>
            <el-table-column prop="taskType" label="TPS(吞吐量)"   align="center"></el-table-column>
            <el-table-column prop="taskType" label="错误率%"  align="center"></el-table-column>

          </el-table>
        </div>
        <div style="display: flex; flex-wrap: wrap; margin-bottom: 50px;">
          <ResponseTimeChart
            chartTitle="平均响应时间"
            chartWidth="550px"
            chartHeight="400px"
            :xData="xData"
            :seriesData="seriesData"
          />
          <ResponseTimeChart
            chartTitle="每秒请求数(RPS)"
            chartWidth="550px"
            chartHeight="400px"
            chartUnit="单位(个)"
            :xData="xData"
            :seriesData="seriesData"
          />
          <ResponseTimeChart
            chartTitle="每秒处理事务数(TPS)"
            chartWidth="550px"
            chartHeight="400px"
            chartUnit="单位(个)"
            :xData="xData"
            :seriesData="seriesData"
          />
          <ResponseTimeChart
            chartTitle="并发用户数"
            chartWidth="550px"
            chartHeight="400px"
            chartUnit="单位(个)"
            :xData="xData"
            :seriesData="seriesData"
          />
          <ResponseTimeChart
            chartTitle="90%响应时间线"
            chartWidth="550px"
            chartHeight="400px"
            :xData="xData"
            :seriesData="seriesData"
          />
          <ResponseTimeChart
            chartTitle="99%响应时间线"
            chartWidth="550px"
            chartHeight="400px"
            :xData="xData"
            :seriesData="seriesData"
          />
        </div>
        <div class="title-info"><el-divider direction="vertical" class="divider"/>报告结果</div>
        <p class="p_text">平均响应时间为0.0ms； 百分之五十响应时间线的值为0.0ms; 百分之九十响应时间线的值为0.0ms; 百分之九十五响应时间线的值为0.0ms; 百分之九十九响应时间线的值为0.0ms; RPS为4771.1; SRPS为4771.1; TPS为4496.0; STPS为4496.0</p>
        <div class="title-info"><el-divider direction="vertical" class="divider"/>结果分析
          <el-button :disabled="!isEdit" @click="startEditing" type="primary">编辑</el-button>
        </div>
        <el-input
            style="font-size: 14px"
            :rows="6"
            type="textarea"
            v-if="inputDlg"
            v-model="desc"
            @blur="cancelEditing"
            ref="input"
            @click.stop
        />
        <p class="p_text" v-else>{{desc}}</p>
      </div>
      <div v-if="activeIndex === '2'" class="munu">
        <div class="spacing">
          <span><i class="el-icon-info" style="margin-left:5px;margin-right: 5px;color: #a5b1ff"></i>压力机监控数据只保留15天！</span>
        </div>
      </div>
      <div v-if="activeIndex === '3'" class="munu">
        <div class="spacing">
          <span><i class="el-icon-info" style="margin-left:5px;margin-right: 5px;color: #a5b1ff"></i>这里内嵌Grafana的监控页面</span>
        </div>
      </div>
      <div v-if="activeIndex === '4'" class="munu">
        <div class="spacing">
          <span><i class="el-icon-info" style="margin-left:5px;margin-right: 5px;color: #a5b1ff"></i>打开日志后会消耗压力机性能，请谨慎！日志只保留最后1000条数据！</span>
        </div>
      </div>
    </el-scrollbar>
  </div>
  </div>
</template>

<script>
import { Icon } from '@iconify/vue'
import ResponseTimeChart from '@/components/echart/ResponseTimeChart.vue'
export default {
  components: {
    Icon,ResponseTimeChart
  },
  data() {
    return {
      taskName: '性能报告',
      desc: '这是一个性能分析',
      taskType: '运行中',
      inputDlg: false,
      activeIndex: '1',
      textResult: '',
      reportList: [],
      xData: ['00:00:01', '00:00:02', '00:00:03', '00:00:04', '00:00:05', '00:00:06'], // 示例 x 轴数据
      seriesData: [
        { name: '接口1', values: [100, 200, 300, 400, 100, 0] },
        { name: '接口2', values: [200, 400, 600, 800, 200, 0] },
        { name: '接口3', values: [300, 600, 900, 1200, 300, 0] },
        { name: '接口4', values: [400, 800, 1200, 1600, 400, 0] },
        { name: '接口5', values: [500, 1000, 1500, 2000, 500, 0] },
        { name: '接口6', values: [600, 1200, 1800, 2400, 600, 0] },
        { name: '接口7', values: [700, 1400, 2100, 2800, 700, 0] },
      ]
    }
  },
  methods: {
    startEditing() {
      this.inputDlg = true;
      this.$nextTick(() => {
        this.$refs.input.focus();
      })
    },
    cancelEditing() {
    this.inputDlg = false;
  },
    handleSelect(index) {
      this.activeIndex = index;
    },

    back() {
      window.history.back();
    },

  },
  computed: {
    isButtonDisabled() {
      return !this.reportList.length; // 数组长度为0时返回true
    },
    isTaskType(){
      return this.taskType === '已完成'
    },
    isEdit(){
      return this.taskType === '已完成'
    }
  },
  mounted() {

  },
  created() {

  }
}
</script>

<style scoped>
.box{
  background-color: #ffffff;
}
.outer {
    background-color: #f5f7f9;
    padding: 3px;
  }
.projectInfo {
  position: absolute; /* 或者 fixed，根据需求选择 */
  top: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.el-tag {
  color: #ffffff;
  width: 70px;
  height: 25px;
  text-align: center;
  font-size: 13px;
  line-height: 23px;

}
.icon-info{
  width: 60px;
  height: 60px;
  background-color: #4c52d5;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.parameter{
  margin-bottom: 3px;
}
.munu{
  margin-top: 10px;
  margin-left: 15px;
  margin-bottom: 5px;
}
.spacing {
  background:#f5f7f9;
  height: 40px;
  line-height: 40px;
}
.spacing > span {
  margin-right: 50px;
  font-size: 15px;
  }
.table-desc {
  margin-top: 30px;
  margin-bottom: 7px;
  display: flex;

}
.table-desc > span {
  margin-right: 50px;
  font-size: 13px;
  line-height: 35px;
  position: relative;
  padding-left: 20px;
  }
.table-desc span::before {
  content: '';
  position: absolute;
  left: 0; /* 圆圈在左侧 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 使圆圈垂直居中 */
  width: 10px; /* 圆圈的宽度 */
  height: 10px; /* 圆圈的高度 */
  background-color: #a5b1ff; /* 圆圈颜色 */
  border-radius: 50%; /* 圆形 */
  }
.divider {
  width: 5px;
  height: 18px;
  margin: -4px 5px 0px 0px;
  background-color: #a5b1ff;

}
.title-info {
  margin-bottom: 10px;
  color: #606266
}
.runStop {
  margin-top: -10px;
  margin-right: 10px
}
.p_text {
  font-size: 15px;
  margin-bottom: 50px;
  background:#f5f7f9;
  height: 40px;
  line-height: 40px
}
</style>